<template>
  <!-- 修改应用弹窗 -->
  <uni-popup ref="popup" type="bottom" mask-background-color="rgba(0,0,0,.5)" :safe-area="false" @maskClick="emits('cancel')">
    <view class="card-wrapper">
      <view class="input-search">
        <uni-easyinput
          v-model="vadta.searchInfo"
          prefixIcon="search"
          :inputBorder="false"
          :clearable="false"
          :styles="styles"
          type="text"
          placeholder="搜索门店名称、ID"
          placeholderStyle=" color: rgba(0,0,0,0.85);font-size: 30rpx;"
        />
        <view class="search-button">搜索</view>
      </view>
      <!-- 循环开始部分 -->
      <view class="store">
        <view class="left">
          <view class="store-dot"></view>
          <view class="app-info">
            <view class="app-name">应用名称</view>
            <view class="app-code">62a55637e4b07ea5b8717ca3</view>
          </view>
        </view>
      </view>

      <!-- 循环结束部分 -->
      <view class="footer-wrapper">
        <view class="footer-main">
          <view class="tips" v-if="tips">{{ tips }}</view>
          <view class="footer-button">
            <view class="flex-center" hover-class="touch-button" @tap="close">取消</view>
            <view class="confirm flex-center" hover-class="touch-button">确认</view>
          </view>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
const emits = defineEmits(['cancel', 'confirm'])
const props = defineProps({
  isAll: { type: Boolean, default: false }, //是否展示全部门店 默认false
  tips: { type: String }, //提示信息 传入则展示
})
const styles = reactive({
  backgroundColor: '#f7f7f7',
  height: '90rpx',
  borderRadius: '10rpx',
  color: '#000',
})
const vadta = reactive({
  searchInfo: '',
})
const popup = ref(null)
const open = (val) => {
  popup.value.open()
}
const close = () => {
  emits('cancel')
  popup.value.close()
}
const confirm = () => {}
onMounted(() => {
  open()
})
defineExpose({ open })
</script>

<style lang="scss" scoped>
.card-wrapper {
  border-radius: 32rpx 32rpx 0 0;
  background-color: #fff;
  overflow: hidden;
  min-height: 70vh;
  .input-search {
    display: flex;
    align-items: center;
    padding-left: 10rpx;
    margin: 30rpx;
    border-radius: 10rpx;
    background-color: #f7f7f7;
    .search-button {
      padding: 24rpx 30rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #2980fd;
    }
  }
  .store {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 40rpx;
    height: 170rpx;
    font-size: 30rpx;
    .left {
      display: flex;
      align-items: center;
      .store-dot {
        align-self: start;
        position: relative;
        top: 2rpx;
        margin-right: 20rpx;
        width: 36rpx;
        height: 36rpx;
        background-color: #d7d8d9;
        border-radius: 50%;
        &::after {
          content: '';
          display: block;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 50%;
          height: 50%;
          border-radius: 50%;
          background-color: #fff;
        }
      }
      .active-dot {
        background-color: #2980fd;
      }
    }
    .app-info {
      .app-code {
        margin-top: 15rpx;
        font-size: 26rpx;
        color: #999;
      }
    }
  }
  .all-store::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 40rpx;
    right: 40rpx;
    height: 1rpx;
    background-color: #ededed;
  }
  .footer-wrapper {
    height: 186rpx;
    .footer-main {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      border-top: 1rpx solid #ededed;
      .tips {
        margin: 20rpx;
        text-align: center;
        font-size: 27rpx;
        color: #a6a6a6;
      }
      .footer-button {
        padding: 0 30rpx;
        margin-top: 30rpx;
        padding-bottom: 30rpx;
        display: flex;
        justify-content: space-between;
        view {
          width: 330rpx;
          height: 110rpx;
          font-size: 33rpx;
          font-weight: 500;
          color: rgba(0, 0, 0, 0.5);
          border-radius: 20rpx;
          background-color: #f7f7f7;
        }
        .confirm {
          color: #fff;
          background: jeepay-bg-primary;
        }
      }
    }
  }
}
</style>
